<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Strands of Fate Character Builder</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css" media="screen">
    <link rel="stylesheet" href="css/style.css" media="screen">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.tmpl.js" type="text/javascript"></script>
    <script src="js/knockout-1.2.1.js" type="text/javascript"></script>
    <script src="js/knockout.mapping-10182011.js" type="text/javascript"></script>
    <script src="js/defaultsAndData.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" data-dojo-config="isDebug: false, parseOnLoad: true" type="text/javascript"></script>


    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.TabContainer");
      dojo.require("dijit.layout.AccordionContainer");
      dojo.require("dijit.form.TextBox");
      dojo.require("dijit.form.NumberTextBox");
      dojo.require("dijit.form.NumberSpinner");
      dojo.require("dijit.form.SimpleTextarea");
      dojo.require("dijit.form.Textarea");
      dojo.require("dijit.form.ComboBox");
      dojo.require("dijit.form.MultiSelect");
      dojo.require("dijit.form.CheckBox");
      dojo.require("dijit.form.Button");
      dojo.require("dojo.data.ItemFileReadStore");
    </script>
    <script>
      ko.bindingHandlers.dijitValue = {
          init: function(element, valueAccessor) {
              //initialize component
              var options = valueAccessor();
              for (var widgetName in options) {};
              var widget = new dijit.form[widgetName](options[widgetName]).placeAt(element);

              //respond to change event of the control
              dojo.connect(widget, "onChange", function() {
                  var value = options[widgetName].value;
                  if (ko.isWriteableObservable(value)) {
                      value(widget.value);
                  }
                  else {
                    alert(widgetName)
                  }
              });
          },
          //respond to updates to the observable
          update: function(element, valueAccessor) {
              var options = valueAccessor();
              for (var widgetName in options) {};
              var widget = dijit.byNode(element.children[0]);
              widget.attr("value", ko.utils.unwrapObservable(options[widgetName].value));
          }
      };




      var highAdvTypeDefaults = {
          'identifier': 'type',
          'label': 'type',
          'items': [
            {'type':'Expert'},
            {'type':'Heroic'},
            {'type':'Power'},
            {'type':'Super Power, Metro Class'},
            {'type':'Super Power, World Class'},
            {'type':'Super Power, Galaxy Class'},
            {'type':'Super Power, Cosmic Class'},
            {'type':'Super Power, Infinity Class'}
          ]
        };


      var viewModel = {
          campaign: {
            gm: ko.observable("test"),
            title: ko.observable(""),
            desc: ko.observable(""),
            pl: ko.observable(""),
            tl: ko.observable(1),
            useTransMorph: ko.observable(false)
          },
          character: {

          },
          aspects: {

          },
          abilities: {

          },
          advantages: {

          },
          equipment: {

          },
          stress: {

          },
          exp: {

          }
      };

      viewModel.campaign.refresh = ko.dependentObservable(function(){
        return getPLVal(viewModel.campaign.pl, "plRefresh");
      });
      viewModel.campaign.tradeRefForAP = ko.dependentObservable(function(){
        return getPLVal(viewModel.campaign.pl, "plTradeFor");
      });
      viewModel.campaign.tradeAmount = ko.dependentObservable(function(){
        return getPLVal(viewModel.campaign.pl, "plTradeAmt");
      });
      viewModel.campaign.abiP = ko.dependentObservable(function(){
        return getPLVal(viewModel.campaign.pl, "plAbiP");
      });
      viewModel.campaign.abiPCap = ko.dependentObservable(function(){
        return getPLVal(viewModel.campaign.pl, "plAbiPCap");
      });
      viewModel.campaign.advP = ko.dependentObservable(function(){
        return getPLVal(viewModel.campaign.pl, "plAdvP");
      });
      viewModel.campaign.advPCap = ko.dependentObservable(function(){
        return getPLVal(viewModel.campaign.pl, "plAdvPCap");
      });
      viewModel.campaign.highAdvType = ko.dependentObservable(function(){
        return getPLVal(viewModel.campaign.pl, "plHighAdvType");
      });

      viewModel.campaign.enableTradeAmount = ko.dependentObservable(function(){
        return (viewModel.campaign.tradeRefForAP() == true);
      });
      viewModel.campaign.showUseTransMorph = ko.dependentObservable(function(){
        return (viewModel.campaign.tl() >= 5);
      });

      // Activates knockout.js
    dojo.addOnLoad(function() {
      var highAdvTypeDefStore = new dojo.data.ItemFileReadStore({
        data: highAdvTypeDefaults
      });

      ko.applyBindings(viewModel);
    });

    </script>
  </head>
  <body class="claro">
    <div class="main">
      <div class="head">
        <span class="headerText">Strands of Fate CharBuilder</span>
        <span class="headRight">
            <button class="btnHeadSave" id="btnHeadSave" dojoType="dijit.form.Button" type="button">
              Save
              <script type="dojo/method" event="onClick" args="evt">
                // Do something:
                alert(JSON.stringify(ko.mapping.toJS(viewModel)));
              </script>
            </button>
            <button class="btnHeadLoad" id="btnHeadLoad" dojoType="dijit.form.Button" type="button">
              Load
              <script type="dojo/method" event="onClick" args="evt">
                // Do something:
              </script>
            </button>
        </span>
      </div>
      <div class="accCon" id="accCon" dojoType="dijit.layout.AccordionContainer">
        <div dojoType="dijit.layout.ContentPane" title="Campaign" selected="true">
          <div class="row">
            <span class="lblCamGM" id="lblCamGM" >Campaign GM:</span>
            <span data-bind="dijitValue: { TextBox: { value: campaign.gm, class:'txtCamGM', id:'txtCamGM', trim: 'true', propercase: 'true' } }"></span>
            <!--<input data-bind="value: campaign.gm" type="text" class="txtCamGM" id="txtCamGM" dojoType="dijit.form.TextBox" trim="true" propercase="true">-->
          </div>
          <div class="row">
            <span class="lblCamTitle" id="lblCamTitle" >Campaign Title:</span>
            <span data-bind="dijitValue: { TextBox: { value: campaign.gm, class:'txtCamTitle', id:'txtCamTitle', trim: 'true', propercase: 'true' } }"></span>
            <!--<input type="text" class="txtCamTitle" id="txtCamTitle" dojoType="dijit.form.TextBox" trim="true" propercase="true">-->
          </div>
          <div class="row">
            <fieldset class="txtAreaField">
              <legend class="lblCamDesc" id="lblCamDesc" >Campaign Description:</legend>
              <!--<span data-bind="dijitValue: { SimpleTextarea: { value: campaign.gm, class:'txtCamDesc', id:'txtCamDesc' } }"></span>
              <!--<textarea class="txtCamDesc" id="txtCamDesc" dojoType="dijit.form.SimpleTextarea"></textarea>-->
            </fieldset>
          </div>
          <div class="row">
            <span class="lblCamPL" id="lblCamPL">Power Level:</span>
            <select dojoType="dijit.form.ComboBox" class="cmboCamPL" id="cmboCamPL">
              <option></option>
              <option>Commoner</option>
              <option>Expert</option>
              <option>Hero</option>
              <option>Action Hero</option>
              <option>Mythic Hero</option>
              <option>Legendary Hero</option>
              <option>Super Hero, Metro Class</option>
              <option>Super Hero, World Class</option>
              <option>Super Hero, Galaxy Class</option>
              <option>Super Hero, Cosmic Class</option>
              <option>Super Hero, Infinity Class</option>
            </select>
          </div>
          <div class="row">
            <span class="lblCamRefresh" id="lblCamRefresh" >Refresh:</span>
            <span data-bind="dijitValue: { NumberTextBox: { value: campaign.gm, class:'txtCamRefresh', id:'txtCamRefresh', constraints: '{min:1,max:50,places:0}', invalidMessage: 'Invalid value.' } }"></span>
            <!--<input class="txtCamRefresh" id="txtCamRefresh" type="text" dojoType="dijit.form.NumberTextBox" constraints="{min:1,max:50,places:0}" invalidMessage="Invalid refresh value.">-->
            <input class="chkCamRefreshTrade" id="chkCamRefreshTrade" dojoType="dijit.form.CheckBox">
            <label class="lblCamRefreshTrade" id="lblCamRefreshTrade" for="chkCamRefreshTrade">Trade Refresh for Advantage Pts:</label>
            <span data-bind="dijitValue: { NumberTextBox: { value: campaign.gm, class:'txtCamRefreshTrade', id:'txtCamRefreshTrade', constraints: '{min:1,max:50,places:0}', invalidMessage: 'Invalid value.' } }"></span>
            <!--<input class="txtCamRefreshTrade" id="txtCamRefreshTrade" type="text" dojoType="dijit.form.NumberTextBox" constraints="{min:0,max:50,places:0}" invalidMessage="Invalid refresh trade in.">-->
          </div>
          <div class="row">
            <span class="lblCamAbiTot" id="lblCamAbiTot" >Ability Pts:</span>
            <span data-bind="dijitValue: { NumberTextBox: { value: campaign.gm, class:'txtCamAbiTot', id:'txtCamAbiTot', constraints: '{min:1,max:200,places:0}', invalidMessage: 'Invalid value.' } }"></span>
            <!--<input class="txtCamAbiTot" id="txtCamAbiTot" type="text" dojoType="dijit.form.NumberTextBox" constraints="{min:1,max:200,places:0}" invalidMessage="Invalid ability points.">-->
            <span class="lblCamAbiCap" id="lblCamAbiCap" >Cap:</span>
            <span data-bind="dijitValue: { NumberTextBox: { value: campaign.gm, class:'txtCamAbiCap', id:'txtCamAbiCap', constraints: '{min:1,max:200,places:0}', invalidMessage: 'Invalid value.' } }"></span>
            <!--<input class="txtCamAbiCap" id="txtCamAbiCap" type="text" dojoType="dijit.form.NumberTextBox" constraints="{min:1,max:200,places:0}" invalidMessage="Invalid ability cap.">-->
            <span class="lblCamAdvTot" id="lblCamAdvTot" >Advantage Pts:</span>
            <span data-bind="dijitValue: { NumberTextBox: { value: campaign.gm, class:'txtCamAdvTot', id:'txtCamAdvTot', constraints: '{min:1,max:200,places:0}', invalidMessage: 'Invalid value.' } }"></span>
            <!--<input class="txtCamAdvTot" id="txtCamAdvTot" type="text" dojoType="dijit.form.NumberTextBox" constraints="{min:1,max:200,places:0}" invalidMessage="Invalid advantage points.">-->
            <span class="lblCamAdvCap" id="lblCamAdvCap">Cap:</span>
            <span data-bind="dijitValue: { NumberTextBox: { value: campaign.gm, class:'txtCamAdvCap', id:'txtCamAdvCap', constraints: '{min:1,max:200,places:0}', invalidMessage: 'Invalid value.' } }"></span>
            <!--<input class="txtCamAdvCap" id="txtCamAdvCap" type="text" dojoType="dijit.form.NumberTextBox" constraints="{min:1,max:200,places:0}" invalidMessage="Invalid advantage cap.">-->
          </div>
          <div class="row">
            <span class="lblCamAdvHigh" id="lblCamAdvHigh">Highest Advantage Type:</span>
<!--            <span data-bind="dijitValue: { ComboBox: { value: campaign.gm, class:'cmboCamAdvHigh', id:'cmboCamAdvHigh', store: 'highAdvTypeDefStore', name: 'type', searchAttr: 'type' } }"></span>-->
            <select dojoType="dijit.form.ComboBox" class="cmboCamAdvHigh" id="cmboCamAdvHigh" store="highAdvTypeDefStore" name="type" searchAttr="type"></select>
<!--            <select dojoType="dijit.form.ComboBox" class="cmboCamAdvHigh" id="cmboCamAdvHigh">
              <option></option>
              <option>Expert</option>
              <option>Heroic</option>
              <option>Power</option>
              <option>Super Power, Metro Class</option>
              <option>Super Power, World Class</option>
              <option>Super Power, Galaxy Class</option>
              <option>Super Power, Cosmic Class</option>
              <option>Super Power, Infinity Class</option>
            </select>-->
          </div>
          <div class="row">
            <span class="lblCamTL" id="lblCamTL">Tech Level:</span>
            <select dojoType="dijit.form.ComboBox" class="cmboCamTL" id="cmboCamTL">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
              <option>6</option>
            </select>
            <input class="chkCamUseTransMorph" id="chkCamUseTransMorph" dojoType="dijit.form.CheckBox">
            <label class="lblCamUseTransMorph" id="lblCamUseTransMorph" for="chkCamUseTransMorph">Use Transhuman Morph Rules</label>
          </div>
        </div>
        <div dojoType="dijit.layout.ContentPane" title="Character">
          <div class="row">
            <span class="lblCharPlayer" id="lblCharPlayer" >Player Name:</span>
            <span data-bind="dijitValue: { TextBox: { value: campaign.gm, class:'txtCharPlayer', id:'txtCharPlayer', trim: 'true', propercase: 'true' } }"></span>
            <!--<input type="text" class="txtCharPlayer" id="txtCharPlayer" dojoType="dijit.form.TextBox" trim="true" propercase="true">-->
          </div>
          <div class="row">
            <span class="lblCharName" id="lblCharName">Character Name:</span>
            <span data-bind="dijitValue: { TextBox: { value: campaign.gm, class:'txtCharName', id:'txtCharName', trim: 'true', propercase: 'true' } }"></span>
            <!--<input type="text" class="txtCharName" id="txtCharName" dojoType="dijit.form.TextBox" trim="true" propercase="true">-->
          </div>
          <div class="row">
            <span class="lblCharConcept" id="lblCharConcept" >Concept:</span>
            <span data-bind="dijitValue: { TextBox: { value: campaign.gm, class:'txtCharConcept', id:'txtCharConcept', trim: 'true', propercase: 'true' } }"></span>
            <!--<input type="text" class="txtCharConcept" id="txtCharConcept" dojoType="dijit.form.TextBox" trim="true" propercase="true">-->
          </div>
          <div class="row">
            <fieldset class="txtAreaField">
              <legend class="lblCharDesc" id="lblCharDesc" >Character Description:</legend>
              <!--<span data-bind="dijitValue: { SimpleTextarea: { value: campaign.gm, class:'txtCharDesc', id:'txtCharDesc' } }"></span>
              <!--<textarea class="txtCharDesc" id="txtCharDesc" dojoType="dijit.form.SimpleTextarea"></textarea>-->
            </fieldset>
          </div>
          <div class="row">
            <fieldset class="txtAreaField">
              <legend class="lblCharHist" id="lblCharHist" >Character History:</legend>
              <!--<span data-bind="dijitValue: { SimpleTextarea: { value: campaign.gm, class:'txtCharHist', id:'txtCharHist' } }"></span>
              <!--<textarea class="txtCharHist" id="txtCharHist" dojoType="dijit.form.SimpleTextarea"></textarea>-->
            </fieldset>
          </div>
        </div>
        <div dojoType="dijit.layout.ContentPane" title="Aspects">
          <div class="row">
            <fieldset class="selectField">
              <legend class="lblAspectCurrent" id="lblAspectCurrent">Current Aspect:</legend>
              <select dojoType="dijit.form.MultiSelect" class="mltAspectCurrent" id="mltAspectCurrent" size="5" multiple="false">
                <option></option>
              </select>
            </fieldset>
          </div>
          <div class="row">
            <span class="lblAspectName" id="lblAspectName" >Aspect Name:</span>
            <span data-bind="dijitValue: { TextBox: { value: campaign.gm, class:'txtAspectName', id:'txtAspectName', trim: 'true', propercase: 'true' } }"></span>
            <!--<input type="text" class="txtAspectName" id="txtAspectName" dojoType="dijit.form.TextBox" trim="true" propercase="true">-->
          </div>
          <div class="row">
            <span class="lblAspectType" id="lblAspectType">Aspect Type:</span>
            <span data-bind="dijitValue: { TextBox: { value: campaign.gm, class:'txtAspectType', id:'txtAspectType', trim: 'true', propercase: 'true' } }"></span>
            <!--<input type="text" class="txtAspectType" id="txtAspectType" dojoType="dijit.form.TextBox" trim="true" propercase="true">-->
          </div>
          <div class="row">
            <span class="lblAspectSpecAbi" id="lblAspectSpecAbi">Specialty Ability:</span>
            <select dojoType="dijit.form.ComboBox" class="cmboAspectSpecAbi" id="cmboAspectSpecAbi">
              <option></option>
              <option>Agility</option>
              <option>Endurance</option>
              <option>Perception</option>
              <option>Strength</option>
              <option>Craft</option>
              <option>Knowledge</option>
              <option>Reasoning</option>
              <option>Willpower</option>
              <option>Deception</option>
              <option>Empathy</option>
              <option>Persuasion</option>
              <option>Resources</option>
            </select>
          </div>
          <div class="row">
            <fieldset class="txtAreaField">
              <legend class="lblAspectInvoke" id="lblAspectInvoke" >Aspect Invoke Notes:</legend>
              <!--<span data-bind="dijitValue: { SimpleTextarea: { value: campaign.gm, class:'txtAspectInvoke', id:'txtAspectInvoke' } }"></span>
              <!--<textarea class="txtAspectInvoke" id="txtAspectInvoke" dojoType="dijit.form.SimpleTextarea"></textarea>-->
            </fieldset>
          </div>
          <div class="row">
            <fieldset class="txtAreaField">
              <legend class="lblAspectCompel" id="lblAspectCompel" >Aspect Compel Notes:</legend>
              <!--<span data-bind="dijitValue: { SimpleTextarea: { value: campaign.gm, class:'txtAspectCompel', id:'txtAspectCompel' } }"></span>
              <!--<textarea class="txtAspectCompel" id="txtAspectCompel" dojoType="dijit.form.SimpleTextarea"></textarea>-->
            </fieldset>
          </div>
          <div class="row">
            <button class="btnAspectAdd" id="btnAspectAdd" dojoType="dijit.form.Button" type="button">
              Add
              <script type="dojo/method" event="onClick" args="evt">
                // Do something:
              </script>
            </button>
            <button class="btnAspectRem" id="btnAspectRem" dojoType="dijit.form.Button" type="button">
              Remove
              <script type="dojo/method" event="onClick" args="evt">
                // Do something:
              </script>
            </button>
          </div>
        </div>
        <div dojoType="dijit.layout.ContentPane" title="Abilities">
          <div class="leftAbility" style="width:40%;">
            <fieldset class="abiLeftField">
              <legend>Physical Abilities</legend>
              <div class="abirow">
                <span class="lblAbiAgi" id="lblAbiAgi" >Agility:</span>
                <input type="text" class="txtAbiAgi" id="txtAbiAgi" dojoType="dijit.form.NumberSpinner" value="0" smallDelta="1" constraints="{min:0,max:5,places:0}">
              </div>
              <div class="abirow">
                <span class="lblAbiEnd" id="lblAbiEnd" >Endurance:</span>
                <input type="text" class="txtAbiEnd" id="txtAbiEnd" dojoType="dijit.form.NumberSpinner" value="0" smallDelta="1" constraints="{min:0,max:5,places:0}">
              </div>
              <div class="abirow">
                <span class="lblAbiPerc" id="lblAbiPerc" >Perception:</span>
                <input type="text" class="txtAbiPerc" id="txtAbiPerc" dojoType="dijit.form.NumberSpinner" value="0" smallDelta="1" constraints="{min:0,max:5,places:0}">
              </div>
              <div class="abirow">
                <span class="lblAbiStr" id="lblAbiStr" >Strength:</span>
                <input type="text" class="txtAbiStr" id="txtAbiStr" dojoType="dijit.form.NumberSpinner" value="0" smallDelta="1" constraints="{min:0,max:5,places:0}">
              </div>
            </fieldset>
            <fieldset class="abiLeftField">
              <legend>Mental Abilities</legend>
              <div class="abirow">
                <span class="lblAbiCra" id="lblAbiCra" >Craft:</span>
                <input type="text" class="txtAbiCra" id="txtAbiCra" dojoType="dijit.form.NumberSpinner" value="0" smallDelta="1" constraints="{min:0,max:5,places:0}">
              </div>
              <div class="abirow">
                <span class="lblAbiKno" id="lblAbiKno" >Knowledge:</span>
                <input type="text" class="txtAbiKno" id="txtAbiKno" dojoType="dijit.form.NumberSpinner" value="0" smallDelta="1" constraints="{min:0,max:5,places:0}">
              </div>
              <div class="abirow">
                <span class="lblAbiRea" id="lblAbiRea" >Reasoning:</span>
                <input type="text" class="txtAbiRea" id="txtAbiRea" dojoType="dijit.form.NumberSpinner" value="0" smallDelta="1" constraints="{min:0,max:5,places:0}">
              </div>
              <div class="abirow">
                <span class="lblAbiWil" id="lblAbiWil" >Willpower:</span>
                <input type="text" class="txtAbiWil" id="txtAbiWil" dojoType="dijit.form.NumberSpinner" value="0" smallDelta="1" constraints="{min:0,max:5,places:0}">
              </div>
            </fieldset>
            <fieldset class="abiLeftField">
              <legend>Social Abilities</legend>
              <div class="abirow">
                <span class="lblAbiDec" id="lblAbiDec" >Deception:</span>
                <input type="text" class="txtAbiDec" id="txtAbiDec" dojoType="dijit.form.NumberSpinner" value="0" smallDelta="1" constraints="{min:0,max:5,places:0}">
              </div>
              <div class="abirow">
                <span class="lblAbiEmp" id="lblAbiEmp" >Empathy:</span>
                <input type="text" class="txtAbiEmp" id="txtAbiEmp" dojoType="dijit.form.NumberSpinner" value="0" smallDelta="1" constraints="{min:0,max:5,places:0}">
              </div>
              <div class="abirow">
                <span class="lblAbiPers" id="lblAbiPers" >Persuasion:</span>
                <input type="text" class="txtAbiPers" id="txtAbiPers" dojoType="dijit.form.NumberSpinner" value="0" smallDelta="1" constraints="{min:0,max:5,places:0}">
              </div>
              <div class="abirow">
                <span class="lblAbiRes" id="lblAbiRes" >Resources:</span>
                <input type="text" class="txtAbiRes" id="txtAbiRes" dojoType="dijit.form.NumberSpinner" value="0" smallDelta="1" constraints="{min:0,max:5,places:0}">
              </div>
            </fieldset>
          </div>
          <div class="rightAbility">
            <fieldset class="abiRightField">
              <div class="abirow">
                <span style="width:80px;">Abilities Set:</span><span>0</span><span>/</span><span>24</span>
              </div>
              <div class="abirow">
                <span style="width:50px;">5's Set:</span><span style="width:30px;">0</span><span style="width:40px;">Phys:</span><span style="padding-left: 10px;">0</span>
              </div>
              <div class="abirow">
                <span style="width:50px;">4's Set:</span><span style="width:30px;">0</span><span style="width:40px;">Mental:</span><span style="padding-left: 10px;">0</span>
              </div>
              <div class="abirow">
                <span style="width:50px;">3's Set:</span><span style="width:30px;">0</span><span style="width:40px;">Social:</span><span style="padding-left: 10px;">0</span>
              </div>
              <div class="abirow">
                <span style="width:50px;">2's Set:</span><span style="width:30px;">0</span><span style="width:40px;">Affinity:</span><span style="padding-left: 10px;">0</span>
              </div>
              <div class="abirow">
                <span style="width:50px;">1's Set:</span><span>0</span>
              </div>
            </fieldset>
            <fieldset class="abiRightField">
              <legend>Affinities</legend>
              <div>
                <span data-bind="dijitValue: { TextBox: { value: campaign.gm, class:'txtAbiAffin1', id:'txtAbiAffin1', trim: 'true', propercase: 'true' } }"></span>
                <!--<input type="text" class="txtAbiAffin1" id="txtAbiAffin1" dojoType="dijit.form.TextBox" trim="true" propercase="true">-->
                <input type="text" class="txtNumAbiAffin1" id="txtNumAbiAffin1" dojoType="dijit.form.NumberSpinner" value="0" smallDelta="1" constraints="{min:0,max:5,places:0}">
              </div>
              <div class="abirow">
                <span data-bind="dijitValue: { TextBox: { value: campaign.gm, class:'txtAbiAffin2', id:'txtAbiAffin2', trim: 'true', propercase: 'true' } }"></span>
                <!--<input type="text" class="txtAbiAffin2" id="txtAbiAffin2" dojoType="dijit.form.TextBox" trim="true" propercase="true">-->
                <input type="text" class="txtNumAbiAffin2" id="txtNumAbiAffin2" dojoType="dijit.form.NumberSpinner" value="0" smallDelta="1" constraints="{min:0,max:5,places:0}">
              </div>
              <div class="abirow">
                <span data-bind="dijitValue: { TextBox: { value: campaign.gm, class:'txtAbiAffin3', id:'txtAbiAffin3', trim: 'true', propercase: 'true' } }"></span>
                <!--<input type="text" class="txtAbiAffin3" id="txtAbiAffin3" dojoType="dijit.form.TextBox" trim="true" propercase="true">-->
                <input type="text" class="txtNumAbiAffin3" id="txtNumAbiAffin3" dojoType="dijit.form.NumberSpinner" value="0" smallDelta="1" constraints="{min:0,max:5,places:0}">
              </div>
              <div class="abirow">
                <span data-bind="dijitValue: { TextBox: { value: campaign.gm, class:'txtAbiAffin4', id:'txtAbiAffin4', trim: 'true', propercase: 'true' } }"></span>
                <!--<input type="text" class="txtAbiAffin4" id="txtAbiAffin4" dojoType="dijit.form.TextBox" trim="true" propercase="true">-->
                <input type="text" class="txtNumAbiAffin4" id="txtNumAbiAffin4" dojoType="dijit.form.NumberSpinner" value="0" smallDelta="1" constraints="{min:0,max:5,places:0}">
              </div>
              <div class="abirow">
                <span data-bind="dijitValue: { TextBox: { value: campaign.gm, class:'txtAbiAffin5', id:'txtAbiAffin5', trim: 'true', propercase: 'true' } }"></span>
                <!--<input type="text" class="txtAbiAffin5" id="txtAbiAffin5" dojoType="dijit.form.TextBox" trim="true" propercase="true">-->
                <input type="text" class="txtNumAbiAffin5" id="txtNumAbiAffin5" dojoType="dijit.form.NumberSpinner" value="0" smallDelta="1" constraints="{min:0,max:5,places:0}">
              </div>
            </fieldset>
            <fieldset class="abiRightField">
              <legend>Alternate Forms</legend>
              <div>
                <select dojoType="dijit.form.ComboBox" class="cmboAbiAltForm" id="cmboAbiAltForm">
                  <option>Base</option>
                </select>
              </div>
              <div class="abirow">
                <button class="btnAbiAltFormAdd" id="btnAbiAltFormAdd" dojoType="dijit.form.Button" type="button">
                  Add
                  <script type="dojo/method" event="onClick" args="evt">
                    // Do something:
                  </script>
                </button>
                <button class="btnAbiAltFormEdit" id="btnAbiAltFormEdit" dojoType="dijit.form.Button" type="button">
                  Edit
                  <script type="dojo/method" event="onClick" args="evt">
                    // Do something:
                  </script>
                </button>
                <button class="btnAbiAltFormRem" id="btnAbiAltFormRem" dojoType="dijit.form.Button" type="button">
                  Rem
                  <script type="dojo/method" event="onClick" args="evt">
                    // Do something:
                  </script>
                </button>
              </div>
            </fieldset>
          </div>
        </div>
        <div dojoType="dijit.layout.ContentPane" title="Advantages">
          <div class="row">
            <fieldset class="selectField">
              <legend class="lblAdvCurrent" id="lblAdvCurrent">Current Advantage:</legend>
              <select dojoType="dijit.form.MultiSelect" class="mltAdvCurrent" id="mltAdvCurrent" size="5" multiple="false">
                <option></option>
              </select>
            </fieldset>
          </div>
          <div class="row">
            <span class="lblAdvName" id="lblAdvName" >Advantage Name:</span>
            <span data-bind="dijitValue: { TextBox: { value: campaign.gm, class:'txtAdvName', id:'txtAdvName', trim: 'true', propercase: 'true' } }"></span>
            <!--<input type="text" class="txtAdvName" id="txtAdvName" dojoType="dijit.form.TextBox" trim="true" propercase="true">-->
            <span class="lblAdvCost" id="lblAdvCost" >Cost:</span>
            <span data-bind="dijitValue: { NumberTextBox: { value: campaign.gm, class:'txtAdvCost', id:'txtAdvCost', constraints: '{min:1,max:200,places:0}', invalidMessage: 'Invalid value.' } }"></span>
            <!--<input class="txtAdvCost" id="txtAdvCost" type="text" dojoType="dijit.form.NumberTextBox" constraints="{min:1,max:200,places:0}" invalidMessage="Invalid advantage cost.">-->
          </div>
          <div class="row">
            <fieldset class="txtAreaField">
              <legend class="lblAdvDesc" id="lblAdvDesc" >Advantage Description:</legend>
              <!--<span data-bind="dijitValue: { SimpleTextarea: { value: campaign.gm, class:'txtAdvDesc', id:'txtAdvDesc' } }"></span>
              <!--<textarea class="txtAdvDesc" id="txtAdvDesc" dojoType="dijit.form.SimpleTextarea"></textarea>-->
            </fieldset>
          </div>
          <div class="row">
            <button class="btnAdvAddList" id="btnAdvAddList" dojoType="dijit.form.Button" type="button">
              Add From List
              <script type="dojo/method" event="onClick" args="evt">
                // Do something:
              </script>
            </button>
            <button class="btnAdvAdd" id="btnAdvAdd" dojoType="dijit.form.Button" type="button">
              Add
              <script type="dojo/method" event="onClick" args="evt">
                // Do something:
              </script>
            </button>
            <button class="btnAdvRem" id="btnAdvRem" dojoType="dijit.form.Button" type="button">
              Remove
              <script type="dojo/method" event="onClick" args="evt">
                // Do something:
              </script>
            </button>
          </div>
        </div>
        <div dojoType="dijit.layout.ContentPane" title="Equipment">
          <div class="row">
            <fieldset class="selectField">
              <legend class="lblEqCurrent" id="lblEqCurrent">Current Equipment:</legend>
              <select dojoType="dijit.form.MultiSelect" class="mltEqCurrent" id="mltEqCurrent" size="5" multiple="false">
                <option></option>
              </select>
            </fieldset>
          </div>
          <div class="row">
            <span class="lblEqName" id="lblEqName" >Equipment Name:</span>
            <span data-bind="dijitValue: { TextBox: { value: campaign.gm, class:'txtEqName', id:'txtEqName', trim: 'true', propercase: 'true' } }"></span>
            <!--<input type="text" class="txtEqName" id="txtEqName" dojoType="dijit.form.TextBox" trim="true" propercase="true">-->
            <span class="lblEqCost" id="lblEqCost" >Cost:</span>
            <span data-bind="dijitValue: { NumberTextBox: { value: campaign.gm, class:'txtEqCost', id:'txtEqCost', constraints: '{min:1,max:200,places:0}', invalidMessage: 'Invalid value.' } }"></span>
            <!--<input class="txtEqCost" id="txtEqCost" type="text" dojoType="dijit.form.NumberTextBox" constraints="{min:1,max:200,places:0}" invalidMessage="Invalid equipment cost.">-->
          </div>
          <div class="row">
            <fieldset class="txtAreaField">
              <legend class="lblEqDesc" id="lblEqDesc" >Equipment Description:</legend>
              <!--<span data-bind="dijitValue: { SimpleTextarea: { value: campaign.gm, class:'txtEqDesc', id:'txtEqDesc' } }"></span>
              <!--<textarea class="txtEqDesc" id="txtEqDesc" dojoType="dijit.form.SimpleTextarea"></textarea>-->
            </fieldset>
          </div>
          <div class="row">
            <button class="btnEqAddMorph" id="btnEqAddMorph" dojoType="dijit.form.Button" type="button">
              Add Morph
              <script type="dojo/method" event="onClick" args="evt">
                // Do something:
              </script>
            </button>
            <button class="btnEqAddList" id="btnEqAddList" dojoType="dijit.form.Button" type="button">
              Add From List
              <script type="dojo/method" event="onClick" args="evt">
                // Do something:
              </script>
            </button>
            <button class="btnEqAdd" id="btnEqAdd" dojoType="dijit.form.Button" type="button">
              Add
              <script type="dojo/method" event="onClick" args="evt">
                // Do something:
              </script>
            </button>
            <button class="btnEqRem" id="btnEqRem" dojoType="dijit.form.Button" type="button">
              Remove
              <script type="dojo/method" event="onClick" args="evt">
                // Do something:
              </script>
            </button>
          </div>
        </div>
        <div dojoType="dijit.layout.ContentPane" title="Stress">
          Lorem ipsum and all around - last...
        </div>
        <div dojoType="dijit.layout.ContentPane" title="Exp">
          Lorem ipsum and all around - last...
        </div>
      </div>
    </div>


  </body>
</html>
